<template>
    <div class="fillcontain">
        <!-- <head-top></head-top> -->
        <div class="table_container" >
            <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="查询条件" name="1">

                <el-row :gutter="20">
                    <el-col :span="20">
                        <div class="demo-input-suffix" >
                            <el-input
                                placeholder="请输入款台编码"
                                prefix-icon="el-icon-search"
                                v-model="sktno">
                            </el-input>
                            <el-input
                                placeholder="请输入终端号"
                                prefix-icon="el-icon-search"
                                v-model="machinecode">
                            </el-input>  
                            <el-select v-model="mallid" clearable placeholder="请选择门店">
                                <el-option
                                v-for="item in mallList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>                              
                            <el-select v-model="status" clearable placeholder="请选择状态">
                                <el-option
                                v-for="item in statusLists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>  
                            <el-select v-model="tysy" clearable placeholder="请选择收银模式">
                                <el-option
                                v-for="item in tysyLists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>       
                            <el-cascader
                                clearable placeholder="请选择店铺"
                                :options="shopList"
                                v-model="selectedOptions"
                                @change="handleChange">
                            </el-cascader>                             
                        </div>
                    </el-col>
                    <el-col :span="4" >
                        <div style="text-align:right">
                        <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="doSearch()" >查询</el-button>
                        </div>
                    </el-col>
                </el-row>    
            </el-collapse-item>
            </el-collapse>
        </div>
        <div class="table_container" >

            <el-row :gutter="10">
                <el-col :span="20">
                    <div class="demo-input-suffix" >
                               
                    </div>
                </el-col>
                <el-col :span="4" >
                    <div style="text-align:right">
                    <el-button round type="primary" icon="el-icon-plus" size="mini" @click="doAdd()" >添加</el-button>
                    </div>
                </el-col>
            </el-row>    
            
        </div>        
        <div class="table_container">
            <el-table
                :data="tableData"
                style="width: 100%" stripe>
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="款台代码">
                        <span>{{ props.row.sktno }}</span>
                      </el-form-item>
                      <el-form-item label="终端号">
                        <span>{{ props.row.machinecode }}</span>
                      </el-form-item>
                      <el-form-item label="ip地址">
                        <span>{{ props.row.ip }}</span>
                      </el-form-item>
                      <el-form-item label="所在门店">
                        <span>{{ props.row.mallname }}</span>
                      </el-form-item>
                      <el-form-item label="所在店铺">
                        <span>{{ props.row.shopname }}</span>
                      </el-form-item>
                      <el-form-item label="状态">
                        <span>{{ props.row.statusname }}</span>
                      </el-form-item>  
                      <el-form-item label="允许退货">
                        <!-- <span>{{ props.row.bj_jf }}</span> -->
                        <el-checkbox v-model="props.row.bcan_th" disabled ></el-checkbox> 
                      </el-form-item>                    
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column  label="款台代码" prop="sktno"></el-table-column>
                <el-table-column  label="终端号"   prop="machinecode"></el-table-column>
                <el-table-column  label="ip地址"   prop="ip"></el-table-column>
                <el-table-column label="所在门店" prop="mallname"></el-table-column>
                <el-table-column label="所在店铺" prop="shopname"></el-table-column>
                <el-table-column label="状态" prop="statusname"></el-table-column>
                <el-table-column label="操作" width="200">
                 <!--  <template scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template> -->
                  <template slot-scope="scope">
                        <el-dropdown >
                        <span class="el-dropdown-link">
                             <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit" @click.native="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item command="del" disabled divided>删除</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                   </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="20"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div>
            <el-dialog title="修改款台信息" v-model="dialogFormVisible" :visible.sync="dialogFormVisible">
                <el-form :model="selectTable">
                    <el-form-item label="款台编码" label-width="100px">
                        <el-input v-model="selectTable.sktno" auto-complete="off"></el-input>
                    </el-form-item>
              <!--       <el-form-item label="门店名称" label-width="100px">
                        <el-autocomplete
                          v-model="address.address"
                          :fetch-suggestions="querySearchAsync"
                          placeholder="请输入地址"
                          style="width: 100%;"
                          @select="addressSelect"
                        ></el-autocomplete>
                        <span>当前城市：{{city.name}}</span>
                    </el-form-item> -->
                    <el-form-item label="终端号" label-width="100px">
                        <el-input v-model="selectTable.machinecode"></el-input>
                    </el-form-item>
                    <el-form-item label="ip地址" label-width="100px">
                        <el-input v-model="selectTable.ip"></el-input>
                    </el-form-item>                    
                    <el-form-item label="状态" label-width="100px">
                        <el-select v-model="selectTable.status">
                            <el-option
                            v-for="item in statusLists"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>                    
                    </el-form-item>
                    <el-form-item label="门店" label-width="100px">
                        <el-select v-model="selectTable.mdid">
                            <el-option
                            v-for="item in mallList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>                    
                    </el-form-item>  
                    <el-form-item label="店铺" label-width="100px">
                           <el-cascader
                                clearable placeholder="请选择店铺"
                                :options="shopList"
                                v-model="curShopOptions"
                                @change="handleChange">
                            </el-cascader>                    
                    </el-form-item>  
                    <el-form-item label=" " label-width="100px">
                      <el-checkbox v-model="selectTable.bcan_th">允许退货</el-checkbox>                  
                    </el-form-item>  
                    <el-form-item label="收款方式" label-width="100px">
                      <el-checkbox v-for="mpb in skt_skfs" :key="mpb.skfsid" v-model="mpb.bcheck">{{mpb.skfsname}}</el-checkbox>                 
                    </el-form-item>                      
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSkt">确 定</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {baseUrl, baseImgPath} from '@/config/env'
    import {getSktLists,getSktOne,saveSkt,deleteSkt,getMallLists,getshopListsForSel,getshopOne1,getshopOne,getshopOneByFid,getSkfsBySktno} from '@/api/getData'
    export default {
        data(){
            return {
                baseUrl,
                baseImgPath,
                searchLoading:false,
                activeNames: ['1'],
                shopid:'',
                shopList:[],
                selectedOptions:[],
                curShopOptions:[], //根据当前的店铺id来生成数组
                mallList:[],
                machinecode:'',
                mallid:'',
                status:'',
                statusLists:[{
                    value: '0',
                    label: '正常'
                    }, {
                    value: '1',
                    label: '停用'
                    }
                ],
                skt_skfs:[
                            {
                                "skfsid": 1,
                                "skfsname": "查看",
                                "bcheck": false
                            },
                            {
                                "skfsid": 2,
                                "skfsname": "回访",
                                "bcheck": false
                            },
                            {
                                "skfsid": 3,
                                "skfsname": "编辑",
                                "bcheck": false
                            }
                ] ,               
                tysy:'',
                tysyLists:[{
                    value: '0',
                    label: '专柜收银'
                    }, {
                    value: '1',
                    label: '统一收银'
                    }
                ],                
                selectIndex: null,
                shopdef: {},
                offset: 0,
                limit: 20,
                count: 0,
                tableData: [],
                currentPage: 1,
                selectTable: {},
                dialogFormVisible: false,
                categoryOptions: [],
                selectedCategory: [],
                address: {},
                sktno:'',
                mallname:''
            }
        },
        created(){
            this.initData();
        },
    	components: {
    		headTop,
    	},
        methods: {
            async initData(){
                try{
                /*     this.city = await cityGuess();
                    const countData = await getResturantsCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    }else{
                        throw new Error('获取数据失败');
                    } */
                    this.getMallLists()
                    this.getShopLists()
                    this.getSktLists();
                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            async getMallLists(){
                var _this = this
                var data = {
                    page:1,
                    rows:999,
                    yttype:0
                }
                const malls = await getMallLists(data);
                this.mallList = [];
                _this.count = malls.total
                malls.rows.forEach(item => {
                    const tableData = {};
                    tableData.value = item.id.toString();
                    tableData.label = item.name;
                    this.mallList.push(tableData);
                })
                console.log('mallList:',this.mallList)
            },  
            async getShopLists(){
                var _this = this
                var data = {
                    page:1,
                    rows:999
                }
                const shops = await getshopListsForSel(data);
                this.shopList = [];
                shops.forEach(item => {
                    const tableData = {};
                    tableData.value = item.value;
                    tableData.label = item.label;
                    tableData.children = item.children;
                    this.shopList.push(tableData);
                })
                console.log('shopList:',this.shopList)
            },
            async getshopOneByFid(){
                var _this = this
                var data = {
                    id:_this.currentData.id
                }
                const oneShop = await getshopOneByFid(data);
                if(oneShop.Status==0){
                    _this.shopdef ={}
                    _this.shopdef.id=oneShop.data.id
                    _this.shopdef.fid=oneShop.data.fid
                }else{
                    this.$message({
                        type: 'error', 
                        message: '获取店铺信息失败'
                    });                   
                }
               // console.log('selectTable',this.selectTable)  
            },   
            async getshopOne(val){
                var _this = this
                var data = {
                    id:val
                }
                const oneShop = await getshopOne(data);
                if(oneShop.Status==0){
                    _this.shopdef ={}
                    _this.shopdef.id=oneShop.data.id
                    _this.shopdef.fid=oneShop.data.fid
                    console.log('getshopOne:',_this.shopdef) 
                }else{
                    this.$message({
                        type: 'error', 
                        message: '获取店铺信息失败'
                    });                   
                }
               // console.log('selectTable',this.selectTable)  
            },                                               
            async getSktLists(){
                var _this = this
                var data = {
                    page:_this.currentPage,
                    rows:_this.limit,
                    sktno :_this.sktno,
                    status:_this.status,
                    mdid:_this.mallid,
                    machinecode:_this.machinecode,
                    bj_tyzf:_this.tysy,
                    shopid:_this.selectedOptions[_this.selectedOptions.length-1]
                   // shopid:_this.selectedOptions[0]
                  //  yttype:_this.yttype==''?null:_this.yttype
                }
                const skts = await getSktLists(data);
                this.tableData = [];
                _this.count = skts.total
                skts.rows.forEach(item => {
                    const tableData = {};
                    tableData.mac1 = item.mac1;
                    tableData.machinecode = item.machinecode;
                    tableData.ip = item.ip;
                    tableData.sktno = item.sktno;
                    tableData.mac2 = item.mac2;
                    tableData.mdid = item.mdid.toString();
                    tableData.mallname = item.mallname;
                    tableData.status = item.status.toString()
                    tableData.shopid = (item.shopid==null)?'':item.shopid.toString();
                    tableData.shopname = item.shopname; 
                    tableData.statusname = item.statusname;  
                    tableData.bcan_th = (item.can_th==0)?true:false;      
                    //tableData.mdid = this.getyttypeName(item.yttype);
                    this.tableData.push(tableData);
                })
            },
            async getSkfsBySktno(val){
                var _this = this
                var data = {
                    page:1,
                    rows:999,
                    sktno:val
                }
                const sktskfslist = await getSkfsBySktno(data);
                this.skt_skfs = [];
                sktskfslist.rows.forEach(item => {
                    const tableData = {};
                    tableData.skfsid = item.skfsid;
                    tableData.skfsname = item.skfsname;
                    tableData.sktno = item.sktno;
                    tableData.bcheck = (item.icheck==1)?true:false
                    this.skt_skfs.push(tableData);
                })
                console.log('skt_skfs:',this.skt_skfs)
            },  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getSktLists()
            },
            handleEdit(index, row) {
                console.log('handleEdit:',row)
                this.selectTable = row;
                this.selectTable.bAdd=false;
                this.selectTable.oldsktno = this.selectTable.sktno
                console.log('selectTable:',row)
               // this.selectIndex =  row.yttype.toString();
               // this.selectTable.yttype =  row.yttype.toString();
              //  this.address.address = row.address;
                this.doFillShop1(this.selectTable)
                this.getSkfsBySktno(row.sktno)
                this.dialogFormVisible = true;
              //  this.selectedCategory = row.category.split('/');
                // if (!this.categoryOptions.length) {
                //     this.getCategory();
                // }
            },
            handleChange(value) {
                console.log(value);
            },            
            doAdd() {
                this.selectTable = {status:'0',bAdd:true}
                this.dialogFormVisible = true;
            },            
            addFood(index, row){
                this.$router.push({ path: 'addGoods', query: { restaurant_id: row.id }})
            },
            async handleDelete(index, row) {
                try{
                    const res = await deleteResturant(row.id);
                    if (res.status == 1) {
                        this.$message({
                            type: 'success',
                            message: '删除店铺成功'
                        });
                        this.tableData.splice(index, 1);
                    }else{
                        throw new Error(res.message)
                    }
                }catch(err){
                    this.$message({
                        type: 'error',
                        message: err.message
                    });
                    console.log('删除店铺失败')
                }
            },
            async doFillShop1(shopdef){
               //this.curShopOptions.push(val)
              // this.getshopOne1(shopdef) 
                var _this = this
                var data = {
                    page:1,
                    rows:999,
                    id:shopdef.shopid
                }
                const shops = await getshopOne1(data);
                this.curShopOptions = [];
                shops.data.forEach(item => {
                    this.curShopOptions.unshift(item);
                })
                console.log('curShopOptions:',this.curShopOptions)
           
            },            
  
            doSearch(){
                this.currentPage=1;
                this.searchLoading=true;
                this.getSktLists();
                this.searchLoading=false;
            },    
            handleCommand(command,row) {
                //this.$message('click on item ' + command);
                console.log('row:',row)
                this.selectTable = row;
              //  this.address.address = row.address;
                this.dialogFormVisible = true;
            },        
            handleServiceAvatarScucess(res, file) {
                if (res.status == 1) {
                    this.selectTable.image_path = res.image_path;
                }else{
                    this.$message.error('上传图片失败！');
                }
            },
            beforeAvatarUpload(file) {
                const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isRightType) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isRightType && isLt2M;
            },
            async updateSkt(){ 
                try{
                   // Object.assign(this.selectTable, this.address);
                   // this.selectTable.category = this.selectedCategory.join('/');
                    this.selectTable.shopid = this.curShopOptions[this.curShopOptions.length-1]
                    this.selectTable.can_th = (this.selectTable.bcan_th==true)?0:1;
                    this.skt_skfs.forEach(item => {
                        item.icheck = (item.bcheck==true)?1:0
                    })
 
                    this.selectTable.sktSkfs = this.skt_skfs
                    const res = await saveSkt(this.selectTable)
                    if (res.Status == 0) {
                        this.dialogFormVisible = false;
                        this.$message({
                            type: 'success',
                            message: '保存款台信息成功'
                        });
                        this.getSktLists();
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                }catch(err){
                    console.log('保存门店信息失败', err);
                }
            },
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 10px 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .demo-input-suffix {
        margin-bottom: 15px;
    }
    .demo-input.demo-zh-CN .el-input {
        width: 180px;
    }
    
    .demo-input-suffix .el-input {
        margin-right: 15px;
        width:auto
    }


</style>
